<template>
	<view class="page-container">
		<view class="flex flex-wrap list_out">
			<navigator  :url="'/mapSubpack/pages/mapDetail/mapDetail?id='+item.id+'&&lev='+2" v-for="item in cityList" :key="item.id" class=" list-box">
				<!-- <image class="out_k" src="http://api.yibi.com.cn/upload/ab/01.png" mode="">
				</image> -->
				<image class="list_img" :src="item.icon?'http://114.55.113.117'+item.icon:'https://api.uviewui.com/uploads/680f542c9999b70562bdebd9.jpeg'" mode="">
				</image>
				<view class="text_cir">
<!-- 					<text class="title">{{item.name}}</text>
					<text class="line"></text>
					<text class="cir">神山净土·秘境阿坝</text> -->
				</view>
			</navigator>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		childrenAreaById
	} from "@/api/map"

	const resChildrenAreaById=async (id)=>{
		await childrenAreaById({id}).then(res=>{
			console.log(res);
			cityList.value = res.result
		})
	}
	const cityList = ref([])
	onLoad( (e) => {
		 resChildrenAreaById(1)
	})
</script>
<style lang="scss" scoped>
	.page-container {
		padding: 26rpx;
		min-height: 100vh;
		background: #fdffeb;

		.list_out {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.list-box {
				margin-bottom: 40rpx;

				&:nth-child(3n-1) {
					margin: 0 26rpx 40rpx;
				}

				position: relative;
				width: 212rpx;
				height: 340rpx;
				box-sizing: border-box;

				.out_k {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}

				.list_img {
					width: 100%;
					height: 100%;
					border-radius: 13rpx;
				}

				.text_cir {
					display: flex;
					align-items: flex-start;
					position: absolute;
					top: 38rpx;
					left: 30rpx;

					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #2B2A25;
						line-height: 26rpx;
						text-stroke: 1px #FDFFEB;
						writing-mode: vertical-rl;
						text-shadow:
							-1px -1px 0 #fff,
							/* 左上 */
							1px -1px 0 #fff,
							/* 右上 */
							-1px 1px 0 #fff,
							/* 左下 */
							1px 1px 0 #fff;
						/* 右下 */
					}

					.line {
						display: inline-block;
						width: 1rpx;
						height: 60rpx;
						background: #2B2A25;
						margin: 0 8rpx;
					}

					.cir {
						font-weight: 500;
						font-size: 18rpx;
						color: #2B2A25;
						line-height: 26rpx;
						max-height: 80%;
						display: inline-block;
						text-stroke: 1px #FDFFEB;
						writing-mode: vertical-rl;
						text-shadow:
							-1px -1px 0 #fff,
							/* 左上 */
							1px -1px 0 #fff,
							/* 右上 */
							-1px 1px 0 #fff,
							/* 左下 */
							1px 1px 0 #fff;
						/* 右下 */
					}
				}
			}
		}

	}
</style>